<template>
  <div class="">
    <el-card class="box-card">
      <div slot="header" class="clearfix">
        <h2 style="font-weight:bold;">基本信息</h2>
      </div>
      <div class="text item " style="display:flex">
        <div style="width:50%">
          <div class="m_top">
            消息类型
            <span style="margin-left:20px">{{
              listData.messageTemplateAliasEnumDesc
            }}</span>
          </div>
          <div class="m_top">
            发送用户
            <span style="margin-left:20px">{{
              listData.noticeUserTypeDesc
            }}</span>
          </div>
          <div
            v-for="(item, index) in listData.messageChannels"
            :key="index"
            class="m_top"
          >
            <template v-if="item.type !== 'BOMB_SCREEN'">
              {{ item.sendTypeDesc }}
              <span style="margin-left:20px"> {{ item.content }} </span>
            </template>
          </div>
        </div>

        <div style="width:50%;" class="right">
          <div v-for="(item, index) in listData.messageChannels" :key="index">
            <span v-if="item.type === 'BOMB_SCREEN'" style="float:left;">{{
              item.sendTypeDesc
            }}</span>
            <div v-if="item.type === 'BOMB_SCREEN'" style="margin-left:80px;">
              <div>展示端口：{{ item.bombScreenType }}</div>
              <div style="margin-top:20px;">
                <span>弹屏图片：</span>
                <el-image
                  style="width: 100px; height: 100px;vertical-align: text-top;"
                  :src="item.bombScreenImage"
                ></el-image>
              </div>
              <div v-if="item.link">跳转链接：{{ item.link }}</div>
            </div>
          </div>
        </div>
      </div>
    </el-card>

    <el-card class="box-card">
      <div slot="header" class="clearfix">
        <h2 style="font-weight:bold;">发送数据</h2>
      </div>

      <div class="text item">
        <el-table :data="tableData" style="width: 100%">
          <el-table-column
            align="center"
            prop="sendTypeDesc"
            label="发送渠道"
            width="180"
          ></el-table-column>
          <el-table-column
            align="center"
            prop="totalNum"
            label="发送数量"
          ></el-table-column>
          <el-table-column
            align="center"
            prop="successNum"
            label="发送成功数量"
          ></el-table-column>
          <el-table-column
            align="center"
            prop="readNum"
            label="查看数量"
          ></el-table-column>
          <el-table-column
            align="center"
            prop="subsequentNum"
            label="后续操作数量"
          ></el-table-column>
        </el-table>
      </div>
    </el-card>
  </div>
</template>

<script>
import { sysMessageDetail, messagesDetailsNumber } from '@/api/notice'
export default {
  data() {
    return {
      listData: {},
      tableData: []
    }
  },

  mounted() {
    this.getList()
    this.getDetails()
  },
  methods: {
    // 列表
    getList() {
      let id = this.$route.query.id
      let params = {}
      sysMessageDetail(
        id,
        params,
        (res) => {
          this.listData = res
        },
        (err) => {
          console.log('err===>', err)
        }
      )
    },
    getDetails() {
      let id = this.$route.query.id
      let params = { templateTypeEnum: 'SYSTEM_TEMPLATE' }
      messagesDetailsNumber(
        id,
        params,
        (res) => {
          res.forEach((ele) => {
            if (ele.readNum === null) {
              ele.readNum = '-'
            }
            if (ele.subsequentNum === null) {
              ele.subsequentNum = '-'
            }
          })
          this.tableData = res
        },
        (err) => {
          console.log('err===>', err)
        }
      )
    }
  }
}
</script>

<style lang="less" scoped>
.font_20 {
  font-size: 20px;
}
.m_top {
  margin-top: 20px;
}
.right {
  vertical-align: text-top;
}
</style>
